<template>
  <div style="width: 100%;">
    <div style="float:right;width: 5%;text-align: right;">
      <div style="float: top;height: 160px;margin-top: 20px;margin-right: 10px">
        <a class="more-a" @click="goProgram(1)">更多</a>
      </div>
      <div style="float: contour;height: 160px;margin-right: 10px">
        <a class="more-a" @click="goProgram(2)">更多</a>
      </div>
      <div style="float: bottom;height: 50px;margin-right: 10px">
        <a class="more-a" @click="goProgram(3)">更多</a>
      </div>
    </div>
    <div style="float:left;width: 95%;text-align: left;">
      <div style="width: 100%;height: 160px">
        <el-table
          :data="shortageRemind"
          style="width: 100%"
          :header-cell-style="{fontWeight:'normal',color:'#52b0d8'}"
          :row-style="{height: '20px'}"
          :cell-style="{padding : '5px 0',border:'0px'}"
          class="my-el-table"
        >
          <template slot="empty">
            <span style="font-size: 20px" />
          </template>
          <el-table-column
            prop="goodsInfo"
            label="缺货的商品（编码/名称）"
            :width="(screenWidth*0.25)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="allSaleAmt"
            label="月销售额"
            :width="(screenWidth*0.09)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="allSaleNum"
            label="月销售量"
            :width="(screenWidth*0.09)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="profitRate"
            label="月毛利率"
            :width="(screenWidth*0.09)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="storNum"
            label="库存"
            :width="(screenWidth*0.09)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="turnoverDay"
            label="周转天数"
            :width="(screenWidth*0.09)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="orgName"
            label="机构名称"
            :width="(screenWidth*0.25)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
        </el-table>
      </div>
      <div style="margin-top: 0px;width: 100%;height: 160px">
        <el-table
          :data="profitRemind"
          style="width: 100%;text-align: left;"
          :header-cell-style="{fontWeight:'normal',color:'#52b0d8'}"
          :row-style="{height: '20px'}"
          :cell-style="{padding : '5px 0',border:'0px'}"
          class="my-el-table"
        >
          <template slot="empty">
            <span style="font-size: 20px" />
          </template>
          <el-table-column
            prop="goodsInfo"
            label="近30日负毛利的商品（编码/名称）"
            :width="(screenWidth*0.25)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="paidInAmt"
            label="月销售额"
            :width="(screenWidth*0.11)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="num"
            label="月销售量"
            :width="(screenWidth*0.11)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="profit"
            label="月毛利额"
            :width="(screenWidth*0.11)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="profitRate"
            label="月毛利率"
            :width="(screenWidth*0.11)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="orgName"
            label="机构名称"
            :width="(screenWidth*0.25)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
        </el-table>
      </div>
      <div style="margin-top: 0px;width: 100%">
        <el-table
          :data="expiredRemind"
          style="width: 100% "
          :header-cell-style="{fontWeight:'normal',color:'#52b0d8'}"
          :row-style="{height: '20px'}"
          :cell-style="{padding : '5px 0',border:'0px'}"
          class="my-el-table"
        >
          <template slot="empty">
            <span style="font-size: 20px" />
          </template>
          <el-table-column
            prop="goodsInfo"
            label="近效期小于30日的商品（编码/名称）"
            :width="(screenWidth*0.25)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="batchInfo"
            label="批号/生产日期~有效期至"
            :width="(screenWidth*0.3)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="placeNum"
            label="库存"
            :width="(screenWidth*0.14)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
          <el-table-column
            prop="orgName"
            label="机构名称"
            :width="(screenWidth*0.25)"
            :render-header="labelHead"
            show-overflow-tooltip
          />
        </el-table>
      </div>
    </div>

  </div>
</template>

<script>
import { shortageRemind, getprofitRemind, getexpiredRemind } from '@/api/erpHome'
export default {
  name: 'GoodsWarning',
  data() {
    return {
      screenWidth: document.body.clientWidth,
      shortageRemind: [],
      profitRemind: [],
      expiredRemind: []
    }
  },
  watch: {
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        const that = this
        setTimeout(function() {
          // 打印screenWidth变化的值
          console.log(this.screenWidth)
          that.timer = false
        }, 400)
      }
    }
  },
  created() {
    this.getShortRemind()
    this.getprofitRemind()
    this.getexpiredRemind()
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },
  methods: {
    goProgram(res) {
      window.parent.postMessage({
        data: res
      }, '*')
    },
    labelHead(h, { column }) {
      const l = column.label.length
      const f = 16
      column.minWidth = f * l
      return h('div', { class: 'table-head', style: { width: '200%', height: '28px', marginLeft: '-10px' }}, [column.label])
    },
    getShortRemind(payload) {
      const params = {
      }
      Object.assign(params, payload)
      shortageRemind({
        ...params
      })
        .then(res => {
          this.shortageRemind = res.data
        })
        .finally(_ => {
          this.loading = false
        })
    },
    getprofitRemind(payload) {
      const params = {
      }
      Object.assign(params, payload)
      getprofitRemind({
        ...params
      })
        .then(res => {
          this.profitRemind = res.data
        })
        .finally(_ => {
          this.loading = false
        })
    },
    getexpiredRemind(payload) {
      const params = {
      }
      Object.assign(params, payload)
      getexpiredRemind({
        ...params
      })
        .then(res => {
          this.expiredRemind = res.data
        })
        .finally(_ => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>
  .my-el-table{
    position:static;
  }
  .more-a{
    font-size: 12px;
  }
</style>
